<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐</title>
    <meta name="keywords" content="谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频"/>
    <meta name="description"
          content="谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
</head>

<body class="W-body">
<div class="in-wrap" id="app">

    <!-- 公共头引入 -->
    <header id="header">
        <section class="container">
            <h1 id="logo">
                <a href="#" title="谷粒学院">
                    <img src="img/logo.png" width="100%" alt="谷粒学院">
                </a>
            </h1>
            <div class="h-r-nsl">
                <ul class="nav">
                    <li><a href="index.html" title="首页">首页</a></li>
                    <li class="current"><a href="course.html" title="课程">课程</a></li>
                    <li><a href="teacher.html" title="名师">名师</a></li>
                    <li><a href="article.html" title="文章">学习地图</a></li>
                    <li><a href="exam.html" title="考试">考试</a></li>
                </ul>
                <!-- / nav -->
                <ul class="h-r-login">
                    <li id="no-login">
                        <a href="login.html" title="登录">
                            <em class="icon18 login-icon">&nbsp;</em><span class="vam ml5">登录</span>
                        </a>
                        |
                        <a href="register.html" title="注册">
                            <span class="vam ml5">注册</span>
                        </a>
                    </li>
                    <li class="mr10 undis" id="is-login-one">
                        <a href="#" title="消息" id="headerMsgCountId">
                            <em class="icon18 news-icon">&nbsp;</em>
                        </a><q class="red-point" style="display: none">&nbsp;</q></li>
                    <li class="h-r-user undis" id="is-login-two">
                        <a href="#" title="">
                            <img src="img/avatar-boy.gif" width="30" height="30" class="vam picImg" alt="">
                            <span class="vam disIb" id="userName"></span>
                        </a>
                        <a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a></li>
                    <!-- /未登录显示第1 li；登录后显示第2，3 li -->
                </ul>
                <aside class="h-r-search">
                    <form action="#" method="post">
                        <label class="h-r-s-box"><input type="text" placeholder="搜索课程" name="queryCourse.courseName"
                                                        value="">
                            <button type="submit" class="s-btn">
                                <em class="icon18">&nbsp;</em>
                            </button>
                        </label>
                    </form>
                </aside>
            </div>
            <aside class="mw-nav-btn">
                <div class="mw-nav-icon"></div>
            </aside>
            <div class="clear"></div>
        </section>
    </header>
    <!-- /公共头引入 -->

    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程详情 开始 -->
        <section class="container">
            <section class="path-wrap txtOf hLh30">
                <a href="#" title="" class="c-999 fsize14">首页</a>
                \
                <a href="#" title="" class="c-999 fsize14">课程列表</a>
                \
                <a href="#" title="" class="c-999 fsize14">后端开发</a>
                \ <span class="c-333 fsize14">Java</span>
            </section>
            <div>
                <article class="c-v-pic-wrap" style="height: 357px;">
                    <section class="p-h-video-box" id="videoPlay">
                        <img src="photo/course/01.jpg" alt="30天搞定Java核心技术" class="dis c-v-pic">
                    </section>
                </article>
                <aside class="c-attr-wrap">
                    <section class="ml20 mr15">
                        <h2 class="hLh30 txtOf mt15">
                            <span class="c-fff fsize24">30天搞定Java核心技术</span>
                        </h2>
                        <section class="c-attr-jg">
                            <span class="c-fff">价格：</span>
                            <b class="c-yellow" style="font-size:24px;">￥0.00</b>
                        </section>
                        <section class="c-attr-mt c-attr-undis">
                                <span class="c-fff fsize14">主讲： 唐嫣&nbsp;&nbsp;&nbsp;
                                </span>
                        </section>
                        <section class="c-attr-mt of">
                            <span class="ml10 vam">
                                <em class="icon18 scIcon"></em>
                                <a class="c-fff vam" title="收藏" href="#">收藏</a>
                            </span>
                        </section>
                        <section class="c-attr-mt">
                            <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
                        </section>
                    </section>
                </aside>
                <aside class="thr-attr-box">
                    <ol class="thr-attr-ol clearfix">
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">购买数</span><br>
                                <h6 class="c-fff f-fM mt10">150</h6>
                            </aside>
                        </li>
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">课时数</span><br>
                                <h6 class="c-fff f-fM mt10">20</h6>
                            </aside>
                        </li>
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">浏览数</span><br>
                                <h6 class="c-fff f-fM mt10">501</h6>
                            </aside>
                        </li>
                    </ol>
                </aside>
                <div class="clear"></div>
            </div>
            <!-- /课程封面介绍 -->
            <div class="mt20 c-infor-box">
                <article class="fl col-7">
                    <section class="mr30">
                        <div class="i-box">
                            <div>
                                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                                    <a name="c-i" class="current" title="课程详情" href="javascript: void(0)">课程详情</a>
                                    <a name="c-g" title="课程大纲" href="javascript: void(0)">课程大纲</a>
                                    <a name="c-c" title="课程评论" href="javascript: void(0)">课程评论</a>
                                </section>
                            </div>
                            <article class="ml10 mr10 pt20">
                                <div>
                                    <h6 class="c-i-content c-infor-title">
                                        <span>课程介绍</span>
                                    </h6>
                                    <div class="course-txt-body-wrap">
                                        <section class="course-txt-body">
                                            <p>Java的发展历史，可追溯到1990年。当时Sun&nbsp;Microsystem公司为了发展消费性电子产品而进行了一个名为Green的项目计划。该计划
                                                负责人是James&nbsp;Gosling。起初他以C++来写一种内嵌式软件，可以放在烤面包机或PAD等小型电子消费设备里，使得机器更聪明，具有人工智
                                                能。但他发现C++并不适合完成这类任务！因为C++常会有使系统失效的程序错误，尤其是内存管理，需要程序设计师记录并管理内存资源。这给设计师们造成
                                                极大的负担，并可能产生许多bugs。&nbsp;<br>
                                                为了解决所遇到的问题，Gosling决定要发展一种新的语言，来解决C++的潜在性危险问题，这个语言名叫Oak。Oak是一种可移植性语言，也就是一种平台独立语言，能够在各种芯片上运行。<br>
                                                1994年，Oak技术日趋成熟，这时网络正开始蓬勃发展。Oak研发小组发现Oak很适合作为一种网络程序语言。因此发展了一个能与Oak配合的浏
                                                览器--WebRunner，后更名为HotJava，它证明了Oak是一种能在网络上发展的程序语言。由于Oak商标已被注册，工程师们便想到以自己常
                                                享用的咖啡(Java)来重新命名，并于Sun&nbsp;World&nbsp;95中被发表出来。</p>
                                        </section>
                                    </div>
                                </div>
                                <!-- /课程介绍 -->

                                <div class="mt50">
                                    <h6 class="c-g-content c-infor-title">
                                        <span>课程大纲</span>
                                    </h6>
                                    <section class="mt20">
                                        <div class="lh-menu-wrap">
                                            <menu id="lh-menu" class="lh-menu mt10 mr10">
                                                <ul>
                                                    <!-- 文件目录 -->
                                                    <li class="lh-menu-stair" v-for="course in courses">
                                                        <a href="javascript: void(0)" title="第一章" class="current-1">
                                                            <em class="lh-menu-i-1 icon18 mr10"></em>
                                                            {{course.cpname}}
                                                        </a>
                                                        <ol class="lh-menu-ol" style="display: block;">
                                                            <li class="lh-menu-second ml30"
                                                                v-for="courseware in coursewares">
                                                                <a title="">
																		<span class="fr">
																			<i class="free-icon vam mr10"
                                                                               @click="look(courseware.cwid)">免费试听</i>
																		</span>
                                                                    <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>
                                                                    {{courseware.cwname}}
                                                                </a>
                                                            </li>
                                                            <!--<li class="lh-menu-second ml30">
                                                                <a href="#" title="" class="current-2">
                                                                    <span class="fr">
																			<i class="free-icon vam mr10">免费试听</i>
																		</span>
                                                                    <em class="lh-menu-i-2 icon16 mr5"></em>
                                                                    第二节
                                                                </a>
                                                            </li>-->
                                                        </ol>
                                                    </li>
                                                </ul>
                                            </menu>
                                        </div>
                                    </section>
                                </div>
                                <!-- /课程大纲 -->
                            </article>
                        </div>
                    </section>
                </article>
                <div class="clear"></div>
            </div>
        </section>
        <!-- /课程详情 结束 -->
    </div>


    <!-- 公共底引入 -->
    <footer id="footer">
        <section class="container">
            <div class="">
                <h4 class="hLh30">
                    <span class="fsize18 f-fM c-999">友情链接</span>
                </h4>
                <ul class="of flink-list">
                    <li><a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="b-foot">
                <section class="fl col-7">
                    <section class="mr20">
                        <section class="b-f-link">
                            <a href="#" title="关于我们" target="_blank">关于我们</a>|
                            <a href="#" title="联系我们" target="_blank">联系我们</a>|
                            <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                            <a href="#" title="资源下载" target="_blank">资源下载</a>|
                            <span>服务热线：010-56253825</span> <span>Email：info@atguigu.com</span>
                        </section>
                        <section class="b-f-link mt10">
                            <span>©2020课程版权均归谷粒学院所有 京ICP备19006131号</span>
                        </section>
                    </section>
                </section>
                <aside class="fl col-3 tac mt15">
                    <section class="gf-tx">
                        <span><img src="img/wx-icon.png" alt=""></span>
                    </section>
                    <section class="gf-tx">
                        <span><img src="img/wb-icon.png" alt=""></span>
                    </section>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
    </footer>
    <!-- 公共底引入 -->
</div>
<script>
    var cid = window.location.href.split("=")[1]; //截取字符串
    new Vue({
        el: "#app",
        data: {
            cid: cid,
            courses: [],
            cpids: [],
            coursewares: []
        },
        mounted() {	//当页面元素加载之前执行
            axios.get("/findChapterByCid/" + this.cid)
                .then(res => {
                    console.info(res.data.data);
                    this.courses = res.data.data;
                    let cus = this.courses;
                    for (let i = 0; i < cus.length; i++) {
                        this.cpids.push(cus[i].cpid);
                    }
                    console.info(this.cpids);
                    let cpidds = this.cpids;
                    for (let j = 0; j < cpidds.length; j++) {
                        axios.get("/findCoursewares/" + cpidds[j])
                            .then(res => {
                                console.info(res.data.data);
                                this.coursewares = res.data.data;
                            });
                    }
                });
        }, methods: {
            look: function (cwid) {
                window.location.href = "movie.html?cwid=" + cwid;
            }
        }
    })
</script>
</body>

</html>